<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            text-align: center;
        }
        #div1{
            width: 200px;
            height: 200px;
            background-color: rgba(10, 78, 73, 0);
            border: 2px solid rgba(0, 0, 0, 0);
            border-radius: 30px;
            margin: 0 auto;
        }
        input{
            width: 100px;
            height: 30px;
            margin: 0 auto;
            display: block;
        }
        #h4{
            text-align: center;
        }
        h3{
            text-align: center;
        }
        #h41{
            text-align: right;
        }

    </style>
</head>
<body>
    <h4 id="h41"></h4><!--计时器-->
    <h1>猜数字 </h1>
    <h4 id="h4">请输入0~100之间的数字，按回车确认。</h4>
    <div id="div1"> <input type="text" id="ip"></div>
    <h1 id="h1"></h1>
    <h2 id="h2"></h2>
    <h3 id="h3"></h3> <!--计算次数-->
    
    <script>
        var a,b,c;
        a=Math.floor(Math.random()*100);
        var c=0;
        var i=0;
        var jishi = setInterval(function(){
            i++;
            h41.innerHTML="用时："+i+"秒";
        },1000)
        //  h2.innerHTML=a;
        ip.onchange=function(){  //当输入框输入内容并回车时触发函数;
            b=ip.value;          //将输入框的值赋给b;
            h1.style.color="black";
            
            if(b>a){
                h1.innerHTML="猜大了";
            }else if(b<a){
                h1.innerHTML="猜小了";
            }
            if(b==a){
                h1.innerHTML="恭喜你猜对了,刷新页面重新开始";
                clearInterval(jishi);
            } 
            if(b>100||b<0){
                h1.innerHTML="你输入的数字不在范围内!";
                h1.style.color="red";
                
            }
            ip.value="";
            c++;
            h3.innerHTML="你猜了"+c+"次";


        }
            
    </script>




</body>
</html>